<h1>双向数据绑定</h1>

<!-- 1.单行文本框 -->
<p>msg: {{msg}} </p>
<input type="text" [value]="msg" [(ngModel)]="msg">
<input type="text" [value]="msg" (input)=" msg=$event.target.value ">
<hr>

<!-- 2.文本域 -->
<p>info：{{info}} </p>
<pre>{{info}}</pre>

<textarea name="" id="" cols="30" rows="10" [value]="info" (input)="info=$event.target.value"></textarea>
<textarea cols="30" rows="10" [(ngModel)]="info"></textarea>
<hr>

<!-- 3.单选按钮 -->
<!-- 没有value返回undefin，在angular浏览器插件中不显示 -->
<!-- <input type="radio" [(ngModel)]="radioData1">
<input type="radio" [(ngModel)]="radioData1"> -->
<input type="radio" value="a" [(ngModel)]="radioData1">
<input type="radio" value="b" [(ngModel)]="radioData1">
<br>
<p>radioData2: {{radioData2}} </p>
<input type="radio" [value]="1" [checked]="radioData2==1" (change)=" radioData2=$event.target.value ">
<input type="radio" [value]="2" [checked]="radioData2==2 " (change)=" radioData2=$event.target.value ">
<hr>
<!-- 4.复选框 -->
<p>checkData1: {{checkData1}} </p>
<input type="checkbox" [(ngModel)]="checkData1">
<p>checkData2: {{checkData2}} </p>
<!-- 无论给不给value，在angular中复选框的双向数据绑定变量都为true和false -->
<input type="checkbox" value="a" [(ngModel)]="checkData2">
<input type="checkbox" value="b" [(ngModel)]="checkData2">
<p>案例：skills:{{ JSON.stringify(skills) }}</p>
<ul>
    <li *ngFor="let key of getKeys(skills);">
        <input type="checkbox" [value]="key" [(ngModel)]="skills[key]"> {{key}}
    </li>
</ul>

<!-- 5.下拉列表 -->
<p>selectData1: {{selectData1}} </p>
<!-- 加上multiple会变成数组 -->
<select [(ngModel)]="selectData1">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option>D</option>
</select>

<hr>
<!-- 6文件选择 -->
<!-- 文件选择没有双向数据绑定 -->
<img [src]="fileSrc" alt="">
<input type="file" (change)="changeFile($event)">